<template>
  <div class="detail-box" @click="handleToDetail(book_id)">
    <van-image :src="image" class="detail-img" fit="cover" radius="4" lazy-load>
      <template v-slot:loading>
        <van-loading type="spinner" size="20" />
      </template>
    </van-image>
    <div class="detail-info">
      <div class="detail-top">
        <div class="detail-title van-ellipsis">
          <div class="name van-ellipsis">{{ name }}</div>
          <div class="writer van-ellipsis">{{ writer }}</div>
        </div>
        <div class="detail-tag">
          <van-tag color="#DCC3FF" plain style="margin-right: 4px">{{
            formatIsOver
          }}</van-tag>
          <van-tag color="#FFCCCC" plain>{{ formatType }}</van-tag>
        </div>
      </div>
      <div class="detail-intro van-multi-ellipsis--l2">{{ intro }}</div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { defineProps, computed } from 'vue'
import { useRouter } from 'vue-router'
import { overTypeMap, bookTypeMap } from '@/utils/bookMap'

const props = defineProps({
  name: {
    type: String,
    default: '未知'
  },
  writer: {
    type: String,
    default: '未知'
  },
  is_over: {
    type: Number,
    required: true
  },
  type: {
    type: Number,
    required: true
  },
  intro: {
    type: String
  },
  book_id: {
    type: Number,
    required: true
  },
  image: {
    type: String,
    default: 'http://foglake.sanye666.top/images/default-covor.jpg'
  }
})

const formatIsOver = computed(() => {
  return overTypeMap[props.is_over] || '未知'
})

const formatType = computed(() => {
  return bookTypeMap[props.type] || '未知'
})

const router = useRouter()

const handleToDetail = (book_id: number) => {
  router.push({
    name: 'Detail',
    params: {
      book_id
    }
  })
}
</script>
<style lang="scss" scoped>
.detail-box {
  position: relative;

  .detail-img {
    position: absolute;
    height: 86px;
    width: 65px;
    background-repeat: no-repeat;
    box-shadow: 0px 4px 12px 0px rgba(6, 27, 65, 0.16);
  }

  .detail-info {
    height: 86px;
    padding: 0 10px 0 80px;
    .detail-top {
      display: flex;
      justify-content: space-between;

      .name {
        font-size: 14px;
        font-family: Alibaba PuHuiTi;
        color: rgba(6, 27, 65, 0.75);
        margin-bottom: 6px;
      }

      .writer {
        font-size: 10px;
        font-family: Alibaba PuHuiTi;
        font-weight: 400;
        color: rgba(6, 27, 65, 0.35);
        margin-bottom: 5px;
      }

      .detail-tag {
        font-size: 12px;
        font-family: Alibaba PuHuiTi;
        font-weight: 400;
        word-break: keep-all;
        white-space: nowrap;
      }
    }

    .detail-intro {
      font-size: 12px;
      font-family: Alibaba PuHuiTi;
      font-weight: 400;
      color: rgba(6, 27, 65, 0.35);
    }
  }
}
</style>
